<template>
<div class="test-con">
  <component :is="currentView"></component>
  <button @click="personChange">切换人员</button>
</div>
</template>
<script setup lang="ts">
import Acomps from '@/views/test/components/a.vue'
import Bcomps from '@/views/test/components/b.vue'
import {reactive,toRefs,markRaw} from "vue";
// toRaw，将响应式对象（由 reactive定义的响应式）转换为普通对象。
//使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新
// markRaw，标记一个对象，使其不能成为一个响应式对象。
// 有些值不应被设置为响应式的，例如复杂的第三方类库等
// 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。
const state = reactive({
  currentView: markRaw(Bcomps)
})
const { currentView } = toRefs(state)

const personChange = () => {
  state.currentView = markRaw(Acomps)
}
</script>
<style scoped>
.test-con{
  padding: 200px;
}
</style>
